Custom Images!
Click Here For Video Review
Now that you have your plan for your game (if you don't go back and do the activity from the previous lesson), it's time to think of the images you'll need!
This lesson will go over creating them yourself using a program called piskelapp!
Before you get started lets go over some good info!
- JPG vs PNG - JPG images will have a white background behind them, not very good for games.
PNG images can be transparent, very good for games, also GIFs can be transparent.
- Fill the Whole Canvas when you Draw! Set the size you want and then don't leave any space around the edges!
To the right is a screen shot of the drawing app called piskelapp.com.
It runs in the browser and has all the tools you need!
The activity in this Lesson will be going over piskelapp.com and helping you get an image for your game!
When you understand this slide, Click the RIGHT ARROW to move on!
Using PiskelApp
Click Here For Video Review
Refer to the image examples below on what the various icons in piskelapp do!
Match the numbers for the definition of each icon!
Go over these so you know what options you have for when you start drawing!
Refer back to this section as often as needed.
LEFT SIDE TOOLS
1. Drawing pencil, will draw pixels based on color from number 16..
2. Paint Bucket, fills whole sections with color.
3. Eraser, it will definetly erase stuff.
4. Rectangle tool, for perfect rectangles.
5. Move tool, grab and move.
6. Rectangle selection, great for copy / paste certain sections.
7. Lighten and darken.
8. Mirror tool, draw both sides at one for perfect symmetry.
9. Same Pixels, paint all pixels the same color.
10. Stroke tool, for perfect lines.
11. Circle tool, for perfect circles.
12. Shape Selection, never used it, move shapes.
13. Laso Selection, never used it, move custom shapes.
14. Dithering Tool, creates checker pattern.
15. Eyedropper, grab exact color needed and add to pallet.
16. Color, click to change color used for tools.
17. List of keyboard shortcuts.
18. List of frames created for your images.
19. Add a new frame.
20. Canvas to draw on!
After you create an Image for your game you need to export it!
Refer to the image below on other options. Export is #4!
RIGHT SIDE TOOLS
1. Settings, play around with these if you want.
2. Resize, resize your image.
3. Save, works great if you connect to a google account.
4. Export, VERY IMPORTANT. This is how you'll get your drawing onto your computer, export as png!
5. Import, if you already have a great image that you want to edit, then just import it and go from there!
6. Layers, add another layer to your image so you don't mess anything up!
7. More options, currently there's another option to crop if you click the plus sign!
8. Flip, you can flip vertically or horizontally!
9. Rotate, rotate your image!
10. Clone, add layers to all your frames.
11. Align, center your image.
12. Pallet, colors you have used for quick reference or add your own.
When you understand this slide, Click the RIGHT ARROW to move on!
Refer back to this slide as often as needed
Activity!
Click Here For Video Review
This Activity will walk you through the following:
- Creating a new folder named Custom Game with an Images folder inside.
- Making Images using piskelapp and downloading them to your new Images folder.
For this Activity, draw your main character or one of your enemies / power ups!
- Inside your Game Design Folder, where Pong, Fish, Platform and Sublime are located, create a new folder named Custom Game.
To create a new folder RIGHT CLICK and select New Folder
- Inside the new folder Custom Game from the previous step, create a folder named Images.
Do not move onto Step 3 until you have completed step 1 & 2!
- Here's the link for piskel app: piskelapp.com, click on it and then click on Create Sprite.
Hint
-
Draw your own image of what you need.
Be sure to use the whole canvas!
Use the Image examples above, in this Lesson, to answer questions about the different icons you see!
When you finish your drawing follow the steps below.
- Click on the export icon (far right, icon looks like a mountain and sun). Then click on png and then click on download.
Hint
The png image will download to your Downloads folder and be named New Piskel.png
- Find your image named New Piskel.png and rename it to Something.png (replace Something with the name you want)
- To rename a file RIGHT CLICK on the file and select rename.
- Move your new image into your Images folder from step 2 which should be inside your Custom Game folder.
Watch the video for help!
- REPEAT THESE STEPS for each image for your game that you want to create yourself!
- If you want to just find images online then:
Find the image you want to use.
RIGHT CLICK on it and select save image as.
Move that Image into the Images folder of your folder named Custom Game.
Congratulations!
If you know where your new image is on your computer then you're ready to go to the next lesson and put it in the game!
